<script>
import { useRouter } from "vue-router";
import { onMounted, reactive, toRefs } from "vue";

export default {
  setup() {
    let router = useRouter();
    const lists = reactive({
      editId: 1,
      hotlist: [],
      regard: [],
    });
    function filters(id) {
      let w = id > 10000 ? (id / 10000).toFixed(1) + "万" : id;
      return w;
    }
    onMounted(() => {
      lists.editId = window.localStorage.getItem("editId");
      lists.regard = JSON.parse(window.localStorage.getItem("regard"));
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f9f8fd;");
      lists.hotlist = JSON.parse(window.localStorage.sum_data).splice(0, 10);
      // console.log(JSON.parse(window.localStorage.sum_data));
      console.log(lists.hotlist);
    });
    let gotoLive = (item, id) => {
      window.localStorage.setItem("article_live", JSON.stringify(item));
      // console.log(item);
      router.push({
        path: "/detailslive",
        query: {
          id,
        },
      });
    };
    return {
      ...toRefs(lists),
      filters,
      gotoLive,
    };
  },
};
</script>

<template>
  <div class="container attention">
    <van-sticky>
      <top-coms v-if="editId == 2"></top-coms>
      <top-com v-if="editId == 1"></top-com>
      <h2>关注</h2>
    </van-sticky>

    <div class="content">
      <!-- 关注 -->
      <div
        class="item"
        v-for="(item, index) in regard"
        :key="item.matchId"
        @click="gotoLive(item, index)"
      >
        <div class="img">
          <img :src="item.anchorAvatar" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ item.anchorName }}</div>
          <div class="text">{{ item.roomName }}</div>
        </div>
        <div :class="['live', { lives: editId == 2 }]">
          <img src="../assets/img/live.gif" alt="" /><span>直播间</span>
        </div>
      </div>

      <van-empty
        class="custom-image"
        image="../assets/img/null2.png"
        description="暂无关注"
        v-show="regard.length < 1"
      />

      <!-- 正在直播 -->
      <div class="hot">
        <h3>正在直播</h3>
        <ul class="hotlist">
          <li
            v-for="(item, index) in hotlist"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <bottom-com :tabId="(tabId = 4)" v-if="editId == 1"></bottom-com>
    <bottom-coms :tabId="(tabId = 4)" v-if="editId == 2"></bottom-coms>
  </div>
</template>

<style lang="scss" scoped>
.attention {
  background-color: #f9f8fd;
  h2 {
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #ededef;
  }
  .transition {
    height: 8px;
    background-color: #f9f8fd;
  }
  .content {
    padding: 0px 10px 95px;
    .item {
      height: 65px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 8px;
      margin-top: 10px;
      border-radius: 8px;
      .img {
        width: 45px;
        height: 45px;
        margin-right: 8px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .info {
        flex: 1;
        .name {
          color: #1e1e1e;
          font-size: 14px;
          font-weight: 600;
          font-family: 黑体;
          margin-top: 4px;
        }
        .text {
          font-size: 12px;
          color: #787a82;
          margin-top: 4px;
        }
      }
      .live {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
        height: 22px;
        width: 67px;
        border-radius: 11px;
        margin-right: 5px;
        img {
          width: 12px;
          margin-left: 8px;
          margin-right: 3px;
        }
        span {
          color: #ffffff;
          text-align: center;
          font-size: 13px;
          transform: scale(0.83, 0.83);
          line-height: 21px;
          margin-right: 5px;
        }
      }
      .lives {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(276deg, #9941f5 0%, #677ff7 100%);
        height: 22px;
        width: 67px;
        border-radius: 11px;
        margin-right: 5px;
        img {
          width: 12px;
          margin-left: 8px;
          margin-right: 3px;
        }
        span {
          color: #ffffff;
          text-align: center;
          font-size: 13px;
          transform: scale(0.83, 0.83);
          line-height: 21px;
          margin-right: 5px;
        }
      }
    }
    .hot {
      h3 {
        font-size: 16px;
        font-weight: 600;
        font-family: 黑体;
        margin: 20px 0 10px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 49%;
          background-color: #fff;
          border-radius: 8px;
          margin-bottom: 10px;
          .img {
            position: relative;
            // width: 100%;
            img {
              width: 100%;
              height: 98px;
              border-radius: 8px 8px 0 0;
            }
            .living {
              position: absolute;
              top: 10px;
              right: 8px;
              width: 48px;
              height: 16px;
              background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
              border-radius: 8px;
              padding-right: 2px;
              vertical-align: middle;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              img {
                width: 8px;
                height: 8px;
                margin-left: 8px;
              }
              span {
                flex: 1;
                transform: scale(0.73, 0.73);
                opacity: 0.8;
                white-space: nowrap;
              }
            }
            .livings {
              background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            }
            .text {
              position: absolute;
              display: flex;
              width: 100%;
              font-size: 12px;
              padding: 5px 10px;
              margin-top: -26px;
              color: white;
              font-weight: 700;
              background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.8) 100%
              );
              .left {
                flex: 1;
              }
              .right {
                .iconfont {
                  font-weight: normal;
                  margin-right: 1px;
                }
              }
            }
          }
          .bottom {
            height: 40px;
            display: flex;
            align-items: center;
            .title {
              flex: 1;
              color: #1e1e1e;
              font-size: 13px;
              transform: scale(0.85, 0.85);
            }
            .label {
              color: #fe1f73;
              font-size: 14px;
              transform: scale(0.83, 0.83);
              width: 40px;
              height: 24px;
              line-height: 24px;
              border-radius: 6px 3px 5px 6px;
              background-color: #ffd3df;
              text-align: center;
              margin-right: 8px;
            }
            .labels {
              color: #6a3aed;
              background-color: #f2ecf9;
            }
          }
        }
      }
    }
  }
}
</style>
